<script setup>
import TempTabs from './components/TempTabs.vue'
import {ref} from 'vue'
import {getRandomId} from '@/utils'

const editableTabs2 = ref([
  {
    title: 'Tab1',
    name: '1'
  },
  {
    title: 'Tab2',
    name: '2'
  },
])
const activeName2 = ref('1')
const handleClick2 = (name) => {
  activeName2.value = name
}

const handleAdd2 = () => {
  const id = getRandomId(4)
  const newItem = {
    title: `Tab${id}`,
    name: id
  }
  editableTabs2.value.push(newItem)
  activeName2.value = id
  console.log(activeName2.value)
}
const handleRemove2 = (targetName) => {
  const index = editableTabs2.value.findIndex(v => v.name === targetName)

  if (targetName === activeName2.value) {
    const tab = editableTabs2.value[index - 1]
    if (tab) {
      activeName2.value = tab.name
    }
  }

  editableTabs2.value.splice(index, 1)
}
</script>

<template>
  <temp-tabs
      v-model="activeName2"
      :tabs="editableTabs2"
      id-key="name"
      title-key="title"
      @tab-click="handleClick2"
      @tab-add="handleAdd2"
      @tab-remove="handleRemove2">
  </temp-tabs>
</template>

<style lang="less" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
